{% block sw_first_run_wizard_data_import %}
<div class="sw-first-run-wizard-data-import">
    <sw-container
        v-if="!isInstallingPlugin"
        columns="1fr 1fr"
        gap="24px 0"
    >
        <div class="sw-first-run-wizard-data-import__card">
            <img
                class="sw-first-run-wizard-data-import__icon-demodata"
                :src="assetFilter('/administration/administration/static/img/first-run-wizard/plugin-demodata-set.svg')"
                alt=""
            >
            <h5 class="sw-first-run-wizard-data-import__headline">
                {{ $tc('sw-first-run-wizard.dataImport.headlineDemoData') }}
            </h5>
            <p
                class="sw-first-run-wizard-data-import__message"
                v-html="$tc('sw-first-run-wizard.dataImport.messageDemoData')"
            ></p>

            <sw-button-process
                v-if="notInstalled('demodata')"
                variant="primary"
                size="small"
                :is-loading="isInstallingPlugin"
                :disabled="isInstallingPlugin"
                :process-success="pluginInstalledSuccessfully.demodata"
                class="button-plugin-install"
                @click="onInstall('demodata')"
            >
                {{ $tc('sw-first-run-wizard.dataImport.buttonInstallDemoData') }}
            </sw-button-process>
            <div
                v-else
                class="plugin-status"
            >
                <span class="plugin-installed">
                    <mt-icon
                        name="regular-check-circle-s"
                        size="16"
                    />
                    {{ $tc('sw-first-run-wizard.general.pluginInstalled') }}
                </span>
            </div>
        </div>

        <div class="sw-first-run-wizard-data-import__card">
            <img
                class="sw-first-run-wizard-data-import__icon-migration"
                :src="assetFilter('/administration/administration/static/img/first-run-wizard/plugin-migration-assistant.svg')"
                alt=""
            >
            <h5 class="sw-first-run-wizard-import-data__headline">
                {{ $tc('sw-first-run-wizard.dataImport.headlineMigration') }}
            </h5>
            <p
                class="sw-first-run-wizard-data-import__message"
                v-html="$tc('sw-first-run-wizard.dataImport.messageMigration')"
            ></p>

            <sw-button-process
                v-if="notInstalled('migration')"
                variant="primary"
                size="small"
                :is-loading="isInstallingPlugin"
                :disabled="isInstallingPlugin"
                :process-success="pluginInstalledSuccessfully.migration"
                class="button-plugin-install"
                @click="onInstall('migration')"
            >
                {{ $tc('sw-first-run-wizard.dataImport.buttonInstallMigration') }}
            </sw-button-process>
            <div
                v-else
                class="plugin-status"
            >
                <span class="plugin-installed">
                    <mt-icon
                        name="regular-check-circle-s"
                        size="16"
                    />
                    {{ $tc('sw-first-run-wizard.general.pluginInstalled') }}
                </span>
            </div>
        </div>
    </sw-container>

    <div
        v-else
        class="installing-plugin"
    >
        <sw-loader size="48px" />
        <p
            class="sw-loader-info-text"
            v-html="$tc('sw-first-run-wizard.dataImport.loadingMessage')"
        ></p>
    </div>

    <div
        v-if="installationError"
        class="sw-first-run-wizard-plugin-installation__error"
    >
        <mt-banner
            :title="pluginError.title"
            variant="critical"
        >
            {{ pluginError.detail }}
        </mt-banner>
    </div>
</div>
{% endblock %}
